<template>
    <div>
      <!--条件查询-->
      <el-form :inline="true" :model="queryForm" ref="queryForm" class="demo-form-inline">
        <el-form-item label="用户ID" prop="userId"><el-input v-model="queryForm.userId" placeholder="请输入用户ID"></el-input></el-form-item>
        <el-form-item label="用户名称" prop="userName"><el-input v-model="queryForm.userName" placeholder="请输入用户名称"></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" @click="executeQuery()">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
          <el-button type="success" @click="toAdd()">增加</el-button>
        </el-form-item>
      </el-form>

      <!--表格-->
      <el-table :data="userData" style="width: 100%">
        <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
        <el-table-column prop="userName" label="用户名称">
          <template slot-scope="scope"><el-tag type="primary" disable-transitions>{{scope.row.userName}}</el-tag></template>
        </el-table-column>
        <el-table-column prop="regTime" label="注册时间"></el-table-column>
        <el-table-column prop="loginTime" label="最后登录时间" ></el-table-column>
        <el-table-column prop="isValid" label="人员状态">
          <!-- 0在职 1休假 2离职 -->
          <template slot-scope="scope">
            <span v-if="scope.row.isValid===0"><el-tag type="success" disable-transitions>在职</el-tag></span>
            <span v-if="scope.row.isValid===1"><el-tag type="info" disable-transitions>休假</el-tag></span>
            <span v-if="scope.row.isValid===2"><el-tag type="danger" disable-transitions>离职</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column prop="headImg" label="用户头像"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.totalNum">
      </el-pagination>

      <!--增加对话框-->
      <el-dialog title="添加" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm">
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="addForm.userName" autocomplete="off" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="人员状态" :label-width="formLabelWidth">
            <el-select v-model="addForm.isValid" placeholder="请选择人员状态">
              <el-option label="在职" value="0"></el-option>
              <el-option label="休假" value="1"></el-option>
              <el-option label="离职" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员角色" :label-width="formLabelWidth">
            <el-select v-model="addForm.roleId" placeholder="请选择人员角色">
              <el-option label="管理员" value="1"></el-option>
              <el-option label="普通用户" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="addForm.regTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="用户头像" :label-width="formLabelWidth">
            <el-input v-model="addForm.headImg" autocomplete="off" placeholder="请输入用户头像"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="executeAdd()">确 定</el-button>
        </div>
      </el-dialog>

      <!--修改对话框-->
      <el-dialog title="修改" :visible.sync="editDialogFormVisible">
        <el-form :model="editForm">
          <el-form-item label="用户名称" :label-width="formLabelWidth">
            <el-input v-model="editForm.userName" autocomplete="off" placeholder="请输入用户名称"></el-input>
          </el-form-item>
          <el-form-item label="人员状态" :label-width="formLabelWidth">
            <el-select v-model="editForm.isValid" placeholder="请选择人员状态">
              <el-option label="在职" :value="0"></el-option>
              <el-option label="休假" :value="1"></el-option>
              <el-option label="离职" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="人员角色" :label-width="formLabelWidth">
            <el-select v-model="editForm.roleId" placeholder="请选择人员角色">
              <el-option label="管理员" :value="1"></el-option>
              <el-option label="普通用户" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册时间" :label-width="formLabelWidth">
            <el-date-picker
                v-model="editForm.regTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="用户头像" :label-width="formLabelWidth">
            <el-input v-model="editForm.headImg" autocomplete="off" placeholder="请输入用户头像"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="executeEdit()">确 定</el-button>
        </div>
      </el-dialog>

    </div>
</template>
<script>
export default {
    data() {
        return {
          userData: [],
          pageInfo: {
            page: 1,
            pageSize: 5,
            totalNum: 30,
          },
          queryForm: {
            userId: '',
            userName: ''
          },
          addDialogFormVisible: false,
          addForm: {
            userName: '',
            isValid: '',
            roleId: '',
            regTime:'',
            headImg: '',
          },
          editDialogFormVisible: false,
          editForm: {
            userId:'',
            userName: '',
            isValid: '',
            roleId: '',
            regTime:'',
            headImg: '',
          },
          formLabelWidth: '120px',
        }
    },
    methods:{
      /* 公共查询函数 */
      queryUser(reqData) {
        this.$axios
            .post("/user/query", reqData)
            .then((resp) => {
              this.userData = resp.data.returnData.userList;
              this.pageInfo = resp.data.returnData.pageInfo;
            })
            .catch((error) => {
              console.log(error);
            });
      },
      handleSizeChange(val) {
        this.pageInfo.page=1;
        this.pageInfo.pageSize=val;
        var reqData=this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm);
        this.queryUser(reqData);
      },
      handleCurrentChange(val) {
        this.pageInfo.page=val;
        var reqData=this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm);
        this.queryUser(reqData);
      },
      executeQuery() {
        var reqData=this.$qs.stringify(this.queryForm);
        this.queryUser(reqData);
      },
      resetForm(queryForm) {
        this.$refs[queryForm].resetFields();
        this.queryUser("");
      },
      toAdd(){
        this.addDialogFormVisible=true;
        this.addForm={userName: '', isValid: '', roleId: '', headImg: '',};
      },
      executeAdd(){
        this.addDialogFormVisible=false;
        this.operateCUD("/user/add",this.$qs.stringify(this.addForm));
      },
      operateCUD(reqUrl,reqData){
        this.$axios.get(reqUrl+"?"+reqData)
            .then(resp=>{
              if (resp.data.returnCode===2002){
                this.$message({
                  showClose: true,
                  message: resp.data.returnMsg,
                  type: 'success'
                });
              }else if (resp.data.returnCode===4002){
                this.$message({
                  showClose: true,
                  message: resp.data.returnMsg,
                  type: 'error'
                });
              };
              this.pageInfo.page = 1;
              this.pageInfo.pageSize = 5;
              var reqData=this.$qs.stringify(this.pageInfo)+"&"+this.$qs.stringify(this.queryForm);
              this.queryUser(reqData);
            })
            .catch(error=>{
              console.log(error)
            });
      },
      toEdit(index, row) {
        this.editDialogFormVisible=true;
        var reqData="userId="+row.userId;
        this.queryUserByUid(reqData);
      },
      queryUserByUid(reqData) {
        this.$axios
            .post("/user/toEdit", reqData)
            .then((resp) => {
              this.editForm = resp.data.returnData;
            })
            .catch((error) => {
              console.log(error);
            });
      },
      executeEdit(){
        this.editDialogFormVisible=false;
        this.operateCUD("/user/edit",this.$qs.stringify(this.editForm));
      },
      executeDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var reqData="userId="+row.userId;
          this.operateCUD("/user/delete",reqData);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    mounted(){
        this.queryUser("");
    },
}
</script>
<style>
    
</style>